<template>
  <div>
    <div
      class="product-window group-con"
      :class="attr.cartAttr === true ? 'on' : ''"
      :style="'padding-bottom:' + (isShowBtn ? '0' : '')"
    >
      <div class="textpic acea-row row-between-wrapper">
        <div class="pictrue">
          <img :src="attr.productSelect.image" class="image">
        </div>
        <div class="text">
          <div>{{ attr.productSelect.store_name }}</div>
          <div class="money font-color-red" v-if="attr.storeInfo.is_free == '0'">
            ￥
            <span style="font-size:0.4rem;font-weight: 600;">
              {{
              attr.productSelect.price.split(".")[0]
              }}
            </span>
            .{{ attr.productSelect.price.split(".")[1] }}
            <span
              class="stock"
              v-if="
                attr.productSelect.stock >= 100 &&
                  attr.productSelect.stock <= 1000
              "
            >库存: {{ attr.productSelect.stock }}{{ attr.storeInfo.unit_name }}</span>
            <span
              class="stock"
              style="color:rgba(252, 64, 74, 1);"
              v-if="attr.productSelect.stock < 100"
            >
              剩余{{ attr.productSelect.stock
              }}{{ attr.storeInfo.unit_name }} 库存紧张
            </span>
            <span class="stock" v-if="attr.productSelect.stock > 1000">库存充足</span>
          </div>
          <div class="money font-color-red" v-if="attr.storeInfo.is_free == '1'">
            ￥
            <span style="font-size:0.4rem;font-weight: 600;">0</span>.00
            <span
              class="stock"
              v-if="
                attr.productSelect.stock >= 100 &&
                  attr.productSelect.stock <= 1000
              "
            >库存: {{ attr.productSelect.stock }}{{ attr.storeInfo.unit_name }}</span>
            <span
              class="stock"
              style="color:rgba(252, 64, 74, 1);"
              v-if="attr.productSelect.stock < 100"
            >
              剩余{{ attr.productSelect.stock
              }}{{ attr.storeInfo.unit_name }} 库存紧张
            </span>
            <span class="stock" v-if="attr.productSelect.stock > 1000">库存充足</span>
          </div>
        </div>
        <!-- <div class="iconfont icon-guanbi" @click="closeAttr"></div> -->
      </div>
      <div class="productWinList">
        <div class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
          <div class="title">{{ item.attr_name }}</div>
          <div class="listn acea-row row-middle">
            <div
              class="itemn"
              :class="item.index === itemn.attr ? 'on' : ''"
              v-for="(itemn, indexn) in item.attr_value"
              @click="tapAttr(indexw, itemn.attr)"
              :key="indexn"
            >{{ itemn.attr }}</div>
          </div>
        </div>
      </div>
      <div class="cart">
        <div class="title">购买数量</div>
        <div class="carnum acea-row row-left" v-show="attr.productSelect.stock > 0">
          <div
            class="item reduce"
            v-show="is_limit_buy == '0' && attr.storeInfo.is_free == '0'"
            :class="attr.productSelect.cart_num <= 1 ? 'on' : ''"
            @click="CartNumDes"
            style="background:rgba(251,251,251,1);"
          >-</div>
          <div class="item num">
            <input
              type="tel"
              v-show="is_limit_buy == '0' && attr.storeInfo.is_free == '0'"
              @input="changeNum(attr.productSelect.cart_num)"
              v-model="attr.productSelect.cart_num"
              class="ipt_num"
            >
            <input
              type="tel"
              v-show="is_limit_buy == '1' || attr.storeInfo.is_free == '1'"
              readonly="readonly"
              @input="changeNum(attr.productSelect.cart_num)"
              v-model="attr.productSelect.cart_num"
              class="ipt_num"
            >
          </div>
          <div
            class="item plus"
            v-show="is_limit_buy == '0'  && attr.storeInfo.is_free == '0'"
            :class="
              attr.productSelect.cart_num >= attr.productSelect.stock
                ? 'on'
                : ''
            "
            @click="CartNumAdd"
          >+</div>
        </div>
      </div>
      <div class="bottomDiv" style="height:1rem;">
        <span class="addToCard" @click="goCat(0)" v-show="attr.productSelect.stock > 0">添加至购物车</span>
        <span class="buy" @click="tapBuy1" v-show="attr.productSelect.stock > 0">立即购买</span>
        <div
          class="noshop"
          style="width: 100%;text-align:center;line-height:1rem;height: 100%;background: rgba(0, 0, 0, 0.2);color: #fff;border-radius: 0.08rem;"
          v-show="attr.productSelect.stock == 0"
        >当前无货</div>
      </div>
      <div class="wrapper" v-if="isShowBtn">
        <div
          class="teamBnt bg-color-red"
          @click="openAlone"
          v-if="
            attr.productSelect.quota > 0 && attr.productSelect.product_stock > 0
          "
        >立即参团</div>
        <div class="teamBnt bg-color-hui" v-else>已售罄</div>
      </div>
    </div>
    <div class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></div>
  </div>
</template>
<script>
export default {
  name: "ProductWindow",
  props: {
    attr: {
      type: Object,
      default: () => {}
    },
    is_limit_buy: {
      type: String
    }
  },
  data: function() {
    return {
      unit_name: ""
    };
  },
  computed: {
    isShow() {
      return this.$route.path.indexOf("detail") === 1;
    },
    isShowBtn() {
      return this.$route.path.indexOf("group_rule") != -1;
    }
  },
  mounted: function() {
    console.log(this.attr);
    this.unit_name = this.attr.storeInfo.unit_name;
  },
  methods: {
    changeNum: function(data) {
      this.attr.productSelect.cart_num = this.attr.productSelect.cart_num.replace(
        /[^\d]/g,
        ""
      );
      // var r =/[^\d]/g;
      // if(!r.test(parseFloat(this.attr.productSelect.cart_num))){
      //   console.log(this.attr.productSelect.cart_num)
      //   this.attr.productSelect.cart_num = "";
      //   return this.$dialog.toast({ mes: "购买数量不能大于库存" });
      // }
      // console.log(this.attr.productSelect.cart_num);
      if (this.attr.productSelect.cart_num > this.attr.productSelect.stock) {
        this.attr.productSelect.cart_num = this.attr.productSelect.stock;
        return this.$dialog.toast({ mes: "购买数量不能大于库存" });
      }
      if (this.attr.productSelect.cart_num === "0") {
        return (this.attr.productSelect.cart_num = 1);
      }
      if (this.attr.productSelect.cart_num > 65535) {
        this.attr.productSelect.cart_num = 65535;
        return this.$dialog.toast({ mes: "购买数量最大值不能高于65535" });
      }
    },
    // 加入购物车；
    goCat: function(news) {
      if (this.attr.productSelect.cart_num == "") {
        this.attr.productSelect.cart_num = 1;
        this.$parent.goCat(0);
      } else {
        this.$parent.goCat(0);
      }
    },
    //立即购买
    tapBuy1: function(news) {
      this.$parent.tapBuy(0);
    },
    openAlone() {
      this.$emit("changeFun", { action: "goPay", value: false });
    },
    closeAttr: function() {
      this.$emit("changeFun", { action: "changeattr", value: false });
    },
    CartNumDes: function() {
      this.$emit("changeFun", { action: "ChangeCartNum", value: false });
    },
    CartNumAdd: function() {
      this.$emit("changeFun", { action: "ChangeCartNum", value: 1 });
    },
    tapAttr: function(indexw, indexn) {
      let that = this;
      console.log(that.attr.productAttr[indexw]);
      console.log(indexn);
      this.unit_name = that.attr.productAttr[indexw].attr_name;
      // this.attr.productSelect.store_name = indexn;
      console.log(this.attr.productSelect.stock);
      that.attr.productAttr[indexw].index = indexn;
      let value = that
        .getCheckedValue()
        .sort()
        .join(",");
      console.log(value);
      that.$emit("changeFun", { action: "ChangeAttr", value: value });
    },
    //获取被选中属性；
    getCheckedValue: function() {
      let productAttr = this.attr.productAttr;
      let value = [];
      for (let i = 0; i < productAttr.length; i++) {
        for (let j = 0; j < productAttr[i].attr_value.length; j++) {
          if (productAttr[i].index === productAttr[i].attr_value[j].attr) {
            value.push(productAttr[i].attr_value[j].attr);
          }
        }
      }
      return value;
    }
  }
};
</script>
<style scoped>
.joinCart {
  width: 80%;
  height: 0.76rem;
  line-height: 0.76rem;
  text-align: center;
}
.ipt_num {
  width: 100%;
  display: block;
  line-height: 0.6rem;
  text-align: center;
}
</style>
